<template>
	<div class="personnelList agent-box">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-caiwu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>代理商管理</el-breadcrumb-item>
			<el-breadcrumb-item>代理商角色</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="tableMaxBox">
				<div class="py_5 px_10">
					<el-row>
						<el-col :span="2">
							<el-button type="success" class="fl" @click="addRoleBtn()" round size="mini">新增角色</el-button>
						</el-col>
						<el-col :span="22">
							<el-form :inline="true" class="form-inline fr" @keyup.enter.native="shearchBtn()">
								<el-form-item class="w_160">
									<el-input v-model="query.name" placeholder="角色名称"></el-input>
								</el-form-item>

								<el-form-item>
									<el-select
										size="mini"
										class="w_150"
										v-model="query.agent_id"
										placeholder="代理商"
										clearable
										filterable
									>
										<el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id"></el-option>
									</el-select>
								</el-form-item>

								<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
									>搜索</el-button
								>
								<el-button size="mini" round @click="resetBtn">重置</el-button>
							</el-form>
						</el-col>
					</el-row>
				</div>
				<template>
					<el-table :data="list" stripe>
						<el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
						<el-table-column prop="name" label="角色名" width="120"></el-table-column>
						<el-table-column prop="sum" label="人数" width="80" align="center">
							<template slot-scope="{ row }">
								<span class="u text-primary" style="cursor: pointer;" @click="toAdminList(row)">{{ row.sum }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="agent_name" label="代理商名称"></el-table-column>
						<el-table-column prop="desc" label="备注"></el-table-column>
						<el-table-column label="操作" width="100px" fixed="right">
							<template slot-scope="{ row }">
								<el-link type="info" class="InfoFont" :underline="false" @click="addRoleBtn(row)">编辑</el-link>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
import qs from 'qs'
var common = require('../../../static/tool.js')
import { fetchAgentList, fetchListRole } from '@/api/agent.js'
export default {
	name: 'agent-box',
	data() {
		return {
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,

			query: {
				name: '',
				agent_id: '',
				type: 2 //代理商角色
			},

			list: [], //列表角色
			agentList: [] //代理商列表
		}
	},
	created() {},
	mounted() {
		this.getAgentList()
		this.getList()
	},
	methods: {
		// 获取代理商列表
		async getAgentList() {
			try {
				let ret = await fetchAgentList({
					status: 1,
					page: 1,
					limit: 10000
				})
				this.agentList = ret.list.map(it => {
					return {
						id: it.id,
						sn: it.sn,
						name: it.name
					}
				})
			} catch (err) {
				console.log('err:', err)
			}
		},

		async getList() {
			try {
				let ret = await fetchListRole({
					...this.query
				})
				this.list = ret.list
			} catch (err) {}
		},

		addRoleBtn(row) {
			if (row) {
				this.$router.push({
					path: '/agentroleadd',
					query: {
						id: row.id
					}
				})
			} else {
				this.$router.push('/agentroleadd')
			}
		},

		//重置
		async resetBtn() {
			this.resetData()
			this.getList()
		},
		//重置请求数据
		resetData() {
			this.pageNum = 1
			for (let key in this.query) {
				this.query[key] = ''
			}
		},

		toAdminList(row) {
			this.$router.push({
				path: '/agentadminlist',
				query: {
					role_id: row.id
				}
			})
		},

		shearchBtn() {
			this.getList()
		}
	},
	filters: {}
}
</script>

<style scoped></style>



// WEBPACK FOOTER //
// src/components/agent/RoleList.vue